<template>
  <div class="app-sidebar">
    <!-- Logo区域 -->
    <div class="sidebar-logo">
      <img src="/logo.svg" alt="Logo" class="logo-img" />
      <span v-if="!appStore.collapsed" class="logo-text">智慧回收箱</span>
    </div>

    <!-- 菜单区域 -->
    <el-scrollbar class="sidebar-menu">
      <el-menu
        :default-active="activeMenu"
        :collapse="appStore.collapsed"
        :unique-opened="true"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#409EFF"
        @select="handleMenuSelect"
      >
        <template v-for="item in menuList" :key="item.path">
          <!-- 有子菜单 -->
          <el-sub-menu v-if="item.children?.length" :index="item.path">
            <template #title>
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.path"
              :index="child.path"
            >
              <el-icon>
                <component :is="child.icon" />
              </el-icon>
              <span>{{ child.title }}</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 无子菜单 -->
          <el-menu-item v-else :index="item.path">
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Odometer,
  User,
  Monitor,
  Box,
  Search,
  Van,
  Money,
  Document,
  TrendCharts,
  Setting,
  UserFilled,
  Location
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()

// 菜单配置
const menuList = [
  {
    path: '/dashboard',
    title: '数据概览',
    icon: Odometer
  },
  {
    path: '/user',
    title: '用户管理',
    icon: User,
    children: [
      { path: '/user/list', title: '用户列表', icon: User },
      { path: '/user/statistics', title: '用户统计', icon: TrendCharts }
    ]
  },
  {
    path: '/device',
    title: '设备管理',
    icon: Monitor,
    children: [
      { path: '/device/list', title: '设备列表', icon: Monitor },
      { path: '/device/inventory', title: '库存设备', icon: Monitor },
      { path: '/device/map', title: '设备地图', icon: Monitor },
      { path: '/device/statistics', title: '设备统计', icon: TrendCharts }
    ]
  },
  {
    path: '/disposal',
    title: '投放管理',
    icon: Box,
    children: [
      { path: '/disposal/records', title: '投放记录', icon: Document },
      { path: '/disposal/pricing', title: '价格管理', icon: Money },
      { path: '/disposal/exceptions', title: '异常处理', icon: Search },
      { path: '/disposal/statistics', title: '投放统计', icon: TrendCharts }
    ]
  },
  {
    path: '/quality',
    title: '质检管理',
    icon: Search,
    children: [
      { path: '/quality/exceptions', title: '异常投递列表', icon: Document },
      { path: '/quality/records', title: '质检记录', icon: Document },
      { path: '/quality/statistics', title: '质检统计', icon: TrendCharts }
    ]
  },
  {
    path: '/cleanup',
    title: '清运管理',
    icon: Van,
    children: [
      { path: '/cleanup/tasks', title: '清运任务', icon: Document },

      { path: '/cleanup/staff', title: '清运员管理', icon: User },
      { path: '/cleanup/assignment', title: '清运分配', icon: Setting },
      { path: '/cleanup/statistics', title: '清运统计', icon: TrendCharts }
    ]
  },
  {
    path: '/finance',
    title: '财务管理',
    icon: Money,
    children: [
      { path: '/finance/revenue', title: '收益统计', icon: TrendCharts },
      { path: '/finance/withdrawal', title: '提现管理', icon: Money },
      { path: '/finance/reports', title: '财务报表', icon: Document },
      { path: '/finance/transactions', title: '资金流水', icon: Document }
    ]
  },
  {
    path: '/content',
    title: '内容管理',
    icon: Document,
    children: [
      { path: '/content/banners', title: '轮播图管理', icon: Document },
      { path: '/content/banner-groups', title: '轮播图组管理', icon: Document },
      { path: '/content/news', title: '新闻管理', icon: Document },
      { path: '/content/announcements', title: '公告管理', icon: Document },
      { path: '/content/help', title: '帮助文档', icon: Document }
    ]
  },
  {
    path: '/area',
    title: '区域管理',
    icon: Location,
    children: [
      { path: '/area/list', title: '区域列表', icon: Location },
      { path: '/area/tree', title: '区域树形', icon: Location }
    ]
  },
  {
    path: '/analytics',
    title: '统计分析',
    icon: TrendCharts,
    children: [
      { path: '/analytics/reports', title: '数据报表', icon: Document },
      { path: '/analytics/users', title: '用户分析', icon: User },
      { path: '/analytics/devices', title: '设备分析', icon: Monitor },
      { path: '/analytics/trends', title: '趋势分析', icon: TrendCharts }
    ]
  },
  {
    path: '/system',
    title: '系统管理',
    icon: Setting,
    children: [
      { path: '/system/admins', title: '管理员管理', icon: User },
      { path: '/system/roles', title: '角色权限', icon: Setting },
      { path: '/system/settings', title: '系统设置', icon: Setting },
      { path: '/system/logs', title: '操作日志', icon: Document },
      { path: '/system/monitor', title: '系统监控', icon: Monitor }
    ]
  },
  {
    path: '/profile',
    title: '个人中心',
    icon: UserFilled,
    children: [
      { path: '/profile/info', title: '个人信息', icon: User },
      { path: '/profile/password', title: '修改密码', icon: Setting },
      { path: '/profile/logs', title: '登录日志', icon: Document }
    ]
  }
]

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 菜单选择处理
const handleMenuSelect = (path: string) => {
  if (path !== route.path) {
    router.push(path)
  }

  // 移动端选择菜单后关闭侧边栏
  if (appStore.device === 'mobile') {
    appStore.closeMobileMenu()
  }
}
</script>

<style lang="scss" scoped>
.app-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;

  .sidebar-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid #1f2937;

    .logo-img {
      width: 32px;
      height: 32px;
    }

    .logo-text {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
    }
  }

  .sidebar-menu {
    flex: 1;

    :deep(.el-menu) {
      border-right: none;

      .el-menu-item,
      .el-sub-menu__title {
        height: 48px;
        line-height: 48px;

        &:hover {
          background-color: #1f2937 !important;
        }

        &.is-active {
          background-color: #1f2937 !important;

          &::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: #409EFF;
          }
        }
      }

      .el-sub-menu {
        .el-menu-item {
          padding-left: 60px !important;

          &:hover {
            background-color: #374151 !important;
          }

          &.is-active {
            background-color: #374151 !important;
            color: #409EFF !important;
          }
        }
      }

      &.el-menu--collapse {
        .el-sub-menu__title,
        .el-menu-item {
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
